<!-- 端口信息 -->
<template>
  <div style="position: relative; min-height: 500px">
    <el-form :model="houDelVO" label-width="110px" size="mini" class="text-gray" style="margin-top: 20px">
      <el-form-item label="平台房源编号" prop="portHouNum" :rules="portHouNumConfig.rules">
        <el-input v-model="houDelVO.portHouNum" style="width: 200px"></el-input>
        <span style="margin-left: 15px">注：此编号推送时对应到各个网站的“房源信息编号”位置。</span>
      </el-form-item>

      <el-form-item label="平台配置" :rules="[{ required: true }]">
        <!-- 安居客推荐户室号 -->
        <ComReHsh
          v-if="tagShowAjk"
          ref="com-re-hsh"
          class="com-re-hsh"
          :noPortAccount="noPortAccount"
          :houPortInfo="houPortInfo"
          :houDelVO="houDelVO"
          @handleSelectHushihao="handleSelectHushihao"
        >
          <template #subitem="{subitem}">
            <el-button class="mw10" round
              >{{ subitem | recommendFormat }} {{ subitem.buildingArea | sizeFormat }}</el-button
            >
          </template>
          <el-button slot="more" class="mw10" type="text" size="medium">点击查看更多户室号</el-button>
        </ComReHsh>

        <div class="table-body bold fs-md">
          <!-- header-title -->
          <com-cell-item
            :isHeader="true"
            :list="['平台名称', '小区名称', '户室号', '总价/万', '面积/㎡', '均价/万', '操作']"
          ></com-cell-item>
          <!-- 组件 -->
          <template v-for="(item, i) in houPortInfo">
            <match-item
              v-if="item.portType === PORT_CODE_AJK"
              :key="i"
              :delId="houDelId"
              :model="item"
              :noPortAccount="noPortAccount"
              :resblockName="houDelVO.resblockName"
              :ref="item.portType"
              @updateportvo="handleUpdatePortVO"
              :autoMatch="needAutoMatching(PORT_CODE_AJK)"
            ></match-item>
            <xfl-match-item
              v-else-if="item.portType === PORT_CODE_XFL_MP" 
              :key="i"
              :delId="houDelId"
              :model="item"
              :noPortAccount="noPortAccount"
              :resblockName="houDelVO.resblockName"
              :ref="item.portType"
              @updateportvo="handleUpdatePortVO"
              :autoMatch="needAutoMatching(PORT_CODE_XFL_MP)"
            ></xfl-match-item>
          </template>
        </div>
      </el-form-item>

      <el-form-item v-if="platformVerifyVisible" label="平台验真">
        <com-platform-verify
          :noPortAccount="noPortAccount"
          :houDelId="houDelId"
          @onHideComPlatformVerify="platformVerifyVisible = false"
        ></com-platform-verify>
      </el-form-item>

      <el-form-item label="平台标签" v-if="tagShowAjk">
        <template v-for="(item, i) in houPortInfo">
          <!-- 目前仅安居客支持标签 -->
          <template v-if="item.portType == PORT_CODE_AJK">
            <com-port-tag
              v-model="item.portTags"
              :key="i"
              :portType="item.portType"
            ></com-port-tag>
          </template>
        </template>
      </el-form-item>
    </el-form>

    <com-no-portaccount :noPortAccount="noPortAccount"></com-no-portaccount>
  </div>
</template>
<script>
import MatchItem from './com/match-item.vue';
import XflMatchItem from './com/xfl-match-item.vue';
import ComPlatformVerify from '@/views/house/com/com-platform-verify.vue';
import ComPortTag from '@/views/house/com/com-port-tag.vue';
import ComReHsh from '@/views/house/com/com-re-hsh.vue';
import ComCellItem from '@/views/house/com/com-cell-item.vue';
import ComNoPortaccount from '@/views/house/com/com-no-portaccount.vue';
import { mapState } from 'vuex';
import { portHouNumConfig } from '@/config/house/houseDetailConfig';
import { saveHouPortInfo } from '@/api/user';
import { PORT_CODE_AJK } from '@/config/house/platform';

export default {
  name: 'ComPortInfo',
  shulan: true,
  components: {
    ComReHsh,
    MatchItem,
    ComPlatformVerify,
    ComPortTag,
    ComCellItem,
    ComNoPortaccount,
    XflMatchItem,
  },
  props: {
    noPortAccount: Number | String,
    from: String,
    exceptionList: Array,
  },
  data() {
    return {
      portHouNumConfig: Object.freeze(portHouNumConfig),
      platformVerifyVisible: true,
      modifiedCount: 1,
    };
  },
  created() {
  },
  mounted() {

  },
  filters: {
    recommendFormat(item) {
      let buildingName = item.buildingName ? item.buildingName + '-' : '';
      let buildingUnitName = item.buildingUnitName ? item.buildingUnitName + '-' : '';
      let houseName = item.houseName || '';
      return buildingName + buildingUnitName + houseName;
    },
    sizeFormat(value) {
      return value ? value + '㎡' : '面积未锁定';
    },
  },
  watch: {
    houPortInfo: {
      deep: true,
      handler() {
        this.modifiedCount--;
      },
    },
  },
  computed: {
    ...mapState({
      houDelVO: (state) => state.houseInfo.houDelVO,
      houDelId: (state) => state.houseInfo.houDelVO.id,
      houPortInfo: (state) => state.houseInfo.houPortInfo,
    }),

    tagShowAjk({houPortInfo}) {
      return houPortInfo.some((v) => v.portType == PORT_CODE_AJK)
    },
    needAutoMatching({exceptionList}) {
      return (portType) => {
        return !exceptionList.find((v) => v.exceptionType === "resBlockId" && v.portType === portType)
      }
    }
  },
  methods: {
    handleSelectHushihao(item) {
      // match-item组件更新
      this.$refs.AJK[0].updateRecommendHushihao(item);
    },

    // 更新端口信息
    handleUpdatePortVO(info) {
      const item = this.houPortInfo.find((v) => v.portType == info.portType);

      for (const key in item) {
        item[key] = info[key];
      }
    },

    // 保存端口匹配信息
    save() {
      if (this.modifiedCount > 0) return Promise.resolve();

      const result = this.houPortInfo.map((item) => {
        return {
          ...item,
          totalPrice: this.setTotalPrices(this.houDelVO, item.totalPrice),
          onePushFlag: '0',
          delPercentage: '1'
        };
      });

      return saveHouPortInfo(result).then(({ isSuccess, errorMessage }) => {
        if (!isSuccess) {
          return Promise.reject({ errorMessage: errorMessage || '端口信息保存失败！' });
        }
      });
    },
  },
};
</script>
<style scoped>
.com-re-hsh >>> .el-button--default {
  border-color: #6294df;
  color: #6294df;
}
</style>
